<template>
  <div class="admin-page-content">
    <el-table v-loading="loading" :data="data" style="width: 100%;" border size="small" ref="roleTable">
      <el-table-column label="角色名称" prop="name"></el-table-column>
      <el-table-column label="备注" prop="description"></el-table-column>
      <el-table-column label="创建时间" prop="createTime">
        <template slot-scope="scope">
          {{moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top" v-if="scope.row.id !== '1' && scope.row.id !== '2' && scope.row.id !== '3' ">
            <i class="icon-table edit-icon" @click="editRule(scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination background @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.pageNumber"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="total"></el-pagination>
      <span class="span-pagination">共{{Math.ceil(total/query.pageSize)}}页,{{total}}条数据</span>
    </div>
    <el-dialog :title="`编辑角色（${editInfo.name}）`" :close-on-press-escape="false"
      :close-on-click-modal="false" :visible.sync="dialogVisible">
      <div class="adduser-model">
        <el-form :model="editInfo" :rules="editRules" ref="roleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="角色名称:" prop="name">
                  <el-input type="textarea" v-model="editInfo.name" :rows="4" :readonly="true"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <el-form-item label="角色描述:" prop="description">
                  <el-input type="textarea" v-model="editInfo.description" :rows="4"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>  
      <div slot="footer" class="dialog-footer">
          <el-button type="info" @click.native="cancelSubmit">取消</el-button>
          <el-button type="primary" @click.native="submitFrom('roleForm')">提交</el-button>
        </div>  
    </el-dialog>
  </div>
</template>
<script>
import { rulesList, updateRules } from '@/api/admin/role-manage';
import moment from 'moment';

export default {
  data() {
    return {
      loading: true,
      data: [],
      total: 0,
      query: {
        pageNumber:1,
        pageSize: 10
      },
      dialogVisible: false,
      editInfo: {
        id: '',
        name: '',
        description: '',
      },
      editRules: {
        description: [ { required: true, message: '请输入角色备注', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getRulsList()
  },
  methods: {
    moment,
    // 保存
    submitFrom(from) {
      const vm = this;
      vm.$refs[from].validate((valid)=>{
        if(valid){
          updateRules(vm.editInfo).then((res)=>{
            if(res.code === '20000') {
              vm.$message.success('修改成功');
              vm.getRulsList()
              vm.dialogVisible = false
            }
          })
        }
      })
    },
    // 取消保存
    cancelSubmit() {
      const vm = this;
      vm.editInfo = vm.$options.data().editInfo
      vm.dialogVisible = false
    },
    // 编辑
    editRule(row) {
      const vm = this;
      vm.editInfo = {
        id: row.id,
        name: row.name,
        description: row.description
      }
      vm.dialogVisible = true
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getRulsList()
    },
    handleCurrentChange(val) {
      this.query.pageNumber = val
      this.getRulsList()
    },
    async getRulsList() {
      const vm = this;
      vm.loading = true;
      let response = await rulesList(vm.query)
      vm.loading = false
      if (response.code === '20000') {
        vm.data = response.data.list;
        vm.total = response.data.total;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.grid-content {
  padding-right: 50px;
  overflow: hidden;
}
</style>